<!DOCTYPE html>
<html>
<head>
    <title>Anyproxy</title>
    <link rel="icon" type="image/png" href="/favico.png" />
    <style type="text/css">
    	.logPanel{
    		border:  1px solid #AAA;
    	}

    	.logPanel p{
    		padding-left: 20px;
    		margin: 10px;
    		white-space: nowrap;
    	}
    </style>    
</head>
<body>
	<input type="text" id="J_data" placeholder="req id" value="1" / >
	<button type="button" id="J_sendReq">Send</button>
	<div class="logPanel" id="J_logPanel"></div>

	<script src="./lib/anyproxy_wsUtil.js"></script>
	<script type="text/javascript">

	//print log
	var logPanel = document.getElementById("J_logPanel");
	function log(data){
		var thisLog = "<p>" + new Date()+ "<br>" + data + "</p>";
		logPanel.innerHTML = thisLog + logPanel.innerHTML;
	}

	//instantiate ws util
	var ws = new anyproxy_wsUtil({
		baseUrl : "127.0.0.1",
		port    : "8003",
		onGetUpdate : function(content){
			log("update id " + content.id + " , content :" + JSON.stringify(content));
		},
		onError : function(e){
			console.log(e);
		}
	});

	//to get some response body
	document.getElementById("J_sendReq").addEventListener("click",function(e){
		var id = document.getElementById("J_data").value;
		log("request for body id=" + id + "...");
		ws.reqBody(id,function(content){
			log("body id " + content.id + " ,content :" + content.body);
		});
	});

	</script>
</body>
</html>
